<template>
  <div class="home">
    <!-- 欢迎横幅 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">欢迎来到 LetHear</h1>
        <p class="hero-subtitle">一个现代化的内容管理系统，让您的声音被听见</p>
        <div class="hero-actions">
          <el-button type="primary" size="large" @click="$router.push('/posts')">
            <el-icon><Document /></el-icon>
            浏览帖子
          </el-button>
          <el-button size="large" @click="$router.push('/whisper')">
            <el-icon><ChatDotRound /></el-icon>
            悄悄话
          </el-button>
        </div>
      </div>
    </section>

    <!-- 功能特色 -->
    <section class="features-section">
      <div class="container">
        <h2 class="section-title">核心功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon size="48"><Edit /></el-icon>
            </div>
            <h3>发布帖子</h3>
            <p>分享您的想法，与社区互动交流</p>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <el-icon size="48"><ChatDotRound /></el-icon>
            </div>
            <h3>悄悄话</h3>
            <p>匿名分享心声，安全私密的交流空间</p>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <el-icon size="48"><User /></el-icon>
            </div>
            <h3>用户管理</h3>
            <p>完善的用户系统，个性化的用户体验</p>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <el-icon size="48"><Setting /></el-icon>
            </div>
            <h3>后台管理</h3>
            <p>强大的管理功能，轻松管理内容和用户</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户手册和平台优势 -->
    <section class="latest-section">
      <div class="container">
        <h2 class="section-title">平台服务</h2>
        <div class="latest-content">
          <div class="user-manual">
            <h3>用户手册</h3>
            <div class="manual-list">
              <div class="manual-item">
                <div class="manual-icon">
                  <el-icon size="32"><Edit /></el-icon>
                </div>
                <div class="manual-content">
                  <h4>如何发布帖子</h4>
                  <p>
                    点击"发布帖子"按钮，选择分类，输入标题和内容，支持Markdown格式，让您的内容更具表现力
                  </p>
                </div>
              </div>

              <div class="manual-item">
                <div class="manual-icon">
                  <el-icon size="32"><ChatDotRound /></el-icon>
                </div>
                <div class="manual-content">
                  <h4>悄悄话功能</h4>
                  <p>匿名分享心声，可以指定用户或使用暗号接收，保护您的隐私同时建立深度连接</p>
                </div>
              </div>

              <div class="manual-item">
                <div class="manual-icon">
                  <el-icon size="32"><User /></el-icon>
                </div>
                <div class="manual-content">
                  <h4>用户系统</h4>
                  <p>完善个人资料，关注感兴趣的用户，查看个人动态，打造属于您的社交网络</p>
                </div>
              </div>

              <div class="manual-item">
                <div class="manual-icon">
                  <el-icon size="32"><Setting /></el-icon>
                </div>
                <div class="manual-content">
                  <h4>个人设置</h4>
                  <p>自定义头像和简介，管理隐私设置，调整通知偏好，让平台更符合您的使用习惯</p>
                </div>
              </div>
            </div>
          </div>

          <div class="platform-advantages">
            <h3>我们的平台优势</h3>
            <div class="advantages-grid">
              <div class="advantage-item">
                <div class="advantage-icon">
                  <el-icon size="40"><Key /></el-icon>
                </div>
                <h4>安全可靠</h4>
                <p>采用先进的加密技术，保护用户数据安全，让您安心使用</p>
              </div>

              <div class="advantage-item">
                <div class="advantage-icon">
                  <el-icon size="40"><Clock /></el-icon>
                </div>
                <h4>高效便捷</h4>
                <p>简洁直观的界面设计，快速响应的操作体验，提升您的使用效率</p>
              </div>

              <div class="advantage-item">
                <div class="advantage-icon">
                  <el-icon size="40"><StarFilled /></el-icon>
                </div>
                <h4>功能丰富</h4>
                <p>多样化的内容形式，强大的交互功能，满足不同用户的需求</p>
              </div>

              <div class="advantage-item">
                <div class="advantage-icon">
                  <el-icon size="40"><Share /></el-icon>
                </div>
                <h4>开放包容</h4>
                <p>鼓励多元化的观点表达，营造和谐友好的社区氛围</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  ChatDotRound,
  Edit,
  User,
  Setting,
  Key,
  Clock,
  StarFilled,
  Share,
} from "@element-plus/icons-vue";
</script>

<style scoped lang="scss">
.home {
  .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;

    .hero-content {
      max-width: 600px;
      margin: 0 auto;

      .hero-title {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .hero-subtitle {
        font-size: 20px;
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .hero-actions {
        display: flex;
        gap: 20px;
        justify-content: center;

        .el-button {
          padding: 12px 30px;
          font-size: 16px;
        }
      }
    }
  }

  .features-section {
    padding: 80px 0;
    background-color: #f8f9fa;

    .section-title {
      text-align: center;
      font-size: 36px;
      color: #2c3e50;
      margin-bottom: 60px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;

      .feature-card {
        background: white;
        padding: 40px 30px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-5px);
        }

        .feature-icon {
          color: #409eff;
          margin-bottom: 20px;
        }

        h3 {
          font-size: 20px;
          color: #2c3e50;
          margin-bottom: 15px;
        }

        p {
          color: #606266;
          line-height: 1.6;
        }
      }
    }
  }

  .latest-section {
    padding: 80px 0;

    .section-title {
      text-align: center;
      font-size: 36px;
      color: #2c3e50;
      margin-bottom: 60px;
    }

    .latest-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 60px;

      .user-manual {
        h3 {
          font-size: 24px;
          color: #2c3e50;
          margin-bottom: 30px;
        }

        .manual-list {
          .manual-item {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
            gap: 20px;

            .manual-icon {
              color: #409eff;
              flex-shrink: 0;
              padding-top: 5px;
            }

            .manual-content {
              flex: 1;

              h4 {
                color: #2c3e50;
                margin-bottom: 10px;
                font-size: 16px;
              }

              p {
                color: #606266;
                line-height: 1.5;
                margin: 0;
              }
            }
          }
        }
      }

      .platform-advantages {
        h3 {
          font-size: 24px;
          color: #2c3e50;
          margin-bottom: 30px;
        }

        .advantages-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;

          .advantage-item {
            background: white;
            padding: 30px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;

            &:hover {
              transform: translateY(-5px);
            }

            .advantage-icon {
              color: #409eff;
              margin-bottom: 15px;
            }

            h4 {
              color: #2c3e50;
              margin-bottom: 10px;
              font-size: 16px;
            }

            p {
              color: #606266;
              font-size: 14px;
              line-height: 1.5;
              margin: 0;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .home {
    .hero-section {
      padding: 60px 0;

      .hero-content {
        padding: 0 20px;

        .hero-title {
          font-size: 36px;
        }

        .hero-subtitle {
          font-size: 18px;
        }

        .hero-actions {
          flex-direction: column;
          align-items: center;

          .el-button {
            width: 200px;
          }
        }
      }
    }

    .features-section {
      padding: 60px 0;

      .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }

    .latest-section {
      padding: 60px 0;

      .latest-content {
        grid-template-columns: 1fr;
        gap: 40px;

        .user-manual {
          .manual-list {
            .manual-item {
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 15px;

              .manual-icon {
                padding-top: 0;
              }
            }
          }
        }

        .platform-advantages {
          .advantages-grid {
            grid-template-columns: 1fr;
            gap: 15px;
          }
        }
      }
    }
  }
}
</style>
